<template>
  <div class="container">
    <p class="van-multi-ellipsis--l2 title">{{infos.title}}</p>
    <van-row>
      <van-col span="3">
        <van-image width="32" height="32" :src="`${$common.filePath}${infos.icon}`" @click="checkIdCard(infos.uid)"/>
      </van-col>
      <van-col span="21">
        <van-row type="flex" justify="space-between">
          <van-col span="6" class="desc">{{infos.name}}</van-col>
          <van-col span="6" class="desc align-right">
            <img class="eye-img" src="../../assets/mine/eye_black.png" />
            <span class="margin-l-5">{{infos.number}}</span>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="18" class="time">{{infos.date}}</van-col>
        </van-row>
      </van-col>
    </van-row>
    <div class="attchment" v-if="!!infos.appendix">
      <van-row type="flex" justify="space-between" @click="preview(infos)">
        <van-col span="3"><img class="attchment-img" :src="$common.fileIcon(infos.file_type)"></van-col>
        <van-col span="18" class="van-ellipsis" >{{infos.appendix_name.split(".")[0]}}</van-col>
        <van-col span="4" class="van-ellipsis">{{'.' + infos.appendix.split(".")[1]}}</van-col>
      </van-row>
    </div>
    <div class="contents" v-html="infos.content"></div>
  </div>
</template>
<script type="text/javascript">
  export default{
    data() {
      return{
        infos: {
          title:"",
          img:"",
          name:"",
          number:"",
          date:"",
          appendix:"",
          content:""
        }
      }
    },
    activated() {
      this.infos = {
        title:"",
        img:"",
        name:"",
        number:"",
        date:"",
        appendix:"",
        content:""
      }
      this.$bridge.callHandler('navBack')
      this.$bridge.callHandler('navTitle', {title: '知识详情'})
      setTimeout(() => {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          this.$router.go(-1);
          responseCallback('go(-1)')
        })
      },500)
      this.showInfo()
    },
    methods:{
      /**
       * 数据
       * @return {[type]} [description]
       */
      showInfo() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}knowledge/knowledge_manage.php`,
          data: {
            do: 'knowledge_detail',
            id: this.$route.query.kid
          }
        }
        this.$axios(config).then(res => {
          this.infos = res.data
          this.infos.appendix = res.data.appendix
          this.infos.content = res.data.content.replace(/<img src="/g,'<img width="100%" src="'+this.$common.filePath)
        }).catch(err => {

        })
      },
      /**
       * 预览
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      preview(info) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${info.appendix}`,
          fileName: info.appendix_name
        })
        window.open(`${this.$common.filePath}${info.appendix}?filename=${info.appendix_name}`)
      },
      /**
       * 用户信息
       * @return {[type]} [description]
       */
      checkIdCard(uid) {
        console.log(uid)
        this.$bridge.callHandler('showUserInfo', {userId: uid})
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .container{
    margin: 15px;
  }
  .title{
    color: #333333;
    font-size: 17px;
    font-weight: bold;
  }
  .attchment{
    background: rgba(46, 121, 255, 0.07);
    height: 30px;
    padding: 15px 15px 10px 15px;
    margin-top: 15px;
  }
  .attchment-img{
    width: 20px;
    height: 23px;
  }
  .desc{
    color: #333333;
    font-size: 14px;
  }
  .time{
    color: #999999;
    font-size: 12px;
  }
  .contents{
    display:block;
    word-break: break-all;
    word-wrap: break-word;
  }
  .eye-img {
    width: 16px;
    height: 10px;
  }
  .margin-l-5 {
    margin-left: 5px;
  }
  .align-right{
    text-align: right;
  }
</style>